<template>
    <div class="containerBox colorF flex JustifyContentSA textC">
        <div class="boxColumn flexC AlignItemsC JustifyContentSB">
            <p class="modal_Title font_s20">采信</p>
            <div class="cx_Box">
                <p class="font_s20 weightBold cx_Title">信用评价</p>
                <div class="flex JustifyContentC AlignItemsC" style="width: 95%;height: 88%;margin: 0 auto;">
                    <img src="../../../assets/img/comprehensive/left/36.png" alt="" style="width:55%;">
                </div>
                <div class="font_s40 weightBold" style="position: absolute;top: 49%;left:44%;">30%</div>
            </div>
            <div class="cx_Box">
                <p class="font_s20 weightBold cx_Title">行业信用</p>
                <div class="flex JustifyContentC AlignItemsC" style="width: 95%;height: 88%;margin: 0 auto;">
                    <img src="../../../assets/img/comprehensive/left/31.png" alt="" style="width: 88%;">
                </div>
                <div class="font_s40 weightBold" style="position: absolute;bottom: 8%;left:44%;">70%</div>
            </div>
        </div>
        <div class="boxColumn flexC AlignItemsC JustifyContentSB">
            <p class="modal_Title font_s20">评信</p>
            <div class="px_BoxTop flexC JustifyContentSA">
                <div class="flex AlignItemsC JustifyContentSA">
                    <p class="px_Title px_BgImg01 font_s20 weightBold">低信用</p>
                    <p class="px_Content font_s20 weightBold">CCC/CC/C/D</p>
                </div>
                <div class="flex AlignItemsC JustifyContentSA">
                    <p class="px_Title px_BgImg02 font_s20 weightBold">中信用</p>
                    <p class="px_Content font_s20 weightBold">BBB/BB/B</p>
                </div>
                <div class="flex AlignItemsC JustifyContentSA">
                    <p class="px_Title px_BgImg03 font_s20 weightBold">高信用</p>
                    <p class="px_Content font_s20 weightBold">AAA/AA/A</p>
                </div>
            </div>
            <div class="px_BoxBottom flexC JustifyContentSB">
                <p class="font_s20 weightBold cx_Title" style="padding-top: 0.2rem;">信用动态调整</p>
                <div class="px_BottomBox flexC AlignItemsC JustifyContentSA">
                    <div class="flex AlignItemsC JustifyContentSA">
                        <p class="px_BottomTitle" style="color:#FFFE78;">信用修复</p>
                        <p class="px_BottomMessage">参考近五年年检结果，发生一次年检合格在原有等级上上升一级</p>
                    </div>
                    <div class="flex AlignItemsC JustifyContentSA">
                        <p class="px_BottomTitle" style="color:#F7C566;">一票否决</p>
                        <p class="px_BottomMessage">一年未参加年检，列入活动异常名录;两年及两年以上未参加年检且无法联系，列入名存实亡  </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="boxColumn flexC AlignItemsC JustifyContentSB">
            <p class="modal_Title font_s20">用信</p>
            <div class="yx_Box">
                <ul class="textC colorF font_s18">
                    <li class="flex" style="background:#1330a6;line-height:2.625rem;margin-bottom:0.825rem;">
                        <span class="flex1">信用等级</span>
                        <span class="flex1">监管方式</span>
                        <span class="flex1">抽样比例</span>
                        <span class="flex1">监管频次</span>
                    </li>
                    <li class="flex" style="background:#04105a;line-height:2.625rem;margin-bottom:0.825rem;">
                        <span class="flex1"><span style="background:#EE6B6A;">低信用</span></span>
                        <span class="flex1">全限检查</span>
                        <span class="flex1">100%</span>
                        <span class="flex1">一个月一次</span>
                    </li>
                    <li class="flex" style="background:#04105a;line-height:2.625rem;margin-bottom:0.825rem;">
                        <span class="flex1"><span style="background:#4FA791;">中信用</span></span>
                        <span class="flex1">重点检查</span>
                        <span class="flex1">30%</span>
                        <span class="flex1">一季度一次</span>
                    </li>
                    <li class="flex" style="background:#04105a;line-height:2.625rem;margin-bottom:0.825rem;">
                        <span class="flex1"><span style="background:#3E92D4;">高信用</span></span>
                        <span class="flex1">调整频次</span>
                        <span class="flex1">10%</span>
                        <span class="flex1">一年一次</span>
                    </li>
                </ul>
            </div>
            <div class="yx_Box yx_BgImg flexC">
                <p class="font_s18 weightBold cx_Title" style="color:#EE718D;">失信惩戒</p>
                <div class="flex1 flexC JustifyContentSA textL" style="padding-left: 2.825rem;">
                    <p>提高检查频次</p>
                    <p>提高专项检查抽比例</p>
                    <p>变更登记有限期延续设置门槛</p>
                    <p>信息化推动业务主管单位</p>
                    <p>必要时采取联合监管</p>
                </div>
            </div>
            <div class="yx_Box yx_BgImg flexC">
                <p class="font_s18 weightBold cx_Title" style="color:#CBE971">守信激励</p>
                <div class="flex1 flexC JustifyContentSA textL" style="padding-left: 2.825rem;">
                    <p>降低检查频次</p>
                    <p>减少专项检查抽取比例</p>
                    <p>政府购买服务优选</p>
                    <p>经济类政策扶持</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {

}
</script>
<style scoped lang="scss">
.containerBox {
    width: 100%;
    height: 100%;
    padding-top: 1.625rem;
    .boxColumn {
        width: 30%;
        height: 90%;
        .modal_Title {
            background: url(../../../assets/img/comprehensive/left/04.png) no-repeat center;
            background-size: 70% 100%;
            width: 100%;
            height: 2.285rem;
            line-height: 2.285rem;
            font-weight: bold;
        }
        .cx_Box {
            width: 85%;
            height: 45%;
            background: url(../../../assets/img/comprehensive/left/30.png) no-repeat center;
            background-size: 100% 100%;
            position: relative;
            .cx_Title {
                width: 100%;
                height: 2.25rem;
                line-height: 2.25rem;
                color: #6CEDE7;
            }
        }
        .px_BoxTop {
            width: 85%;
            height: 55%;
            .px_Title {
                width: 28%;
                height: 10vh;
                line-height: 10vh;
            }
            .px_BgImg01 {
                background: url(../../../assets/img/comprehensive/left/33.png) no-repeat center;
                background-size: 100% 100%;
                color: #EE718C;
            }
            .px_BgImg02 {
                background: url(../../../assets/img/comprehensive/left/34.png) no-repeat center;
                background-size: 100% 100%;
                color: #F8D286;
            }
            .px_BgImg03 {
                background: url(../../../assets/img/comprehensive/left/35.png) no-repeat center;
                background-size: 100% 100%;
                color: #CBE971;
            }
            .px_Content {
                background: url(../../../assets/img/comprehensive/left/07.png) no-repeat center;
                background-size: 100% 100%;
                width: 66%;
                height: 8vh;
                line-height: 8vh;
            }
        }
        .px_BoxBottom {
            width: 85%;
            height: 35%;
            background: url(../../../assets/img/comprehensive/left/32.png) no-repeat center;
            background-size: 100% 100%;
            .px_BottomBox {
                width: 100%;
                height: 85%;
                .px_BottomTitle {
                    width: 7.825rem;
                    line-height: 2.825rem;
                    margin-right: 0.825rem;
                    background-color: #2949A0;
                }
                .px_BottomMessage {
                    width: 15.825rem;
                    padding: 0.825rem 0;
                    text-align: left;
                }
            }
        }
        .yx_Box {
            width: 85%;
            height: 30%;
        }
        .yx_BgImg {
            background: url(../../../assets/img/comprehensive/left/30.png) no-repeat center;
            background-size: 100% 100%;
        }
    }
}
</style>
